<template>
  <div>
    <el-dialog
      title="文档查看申请"
      v-model="showDialog"
      :before-close="close"
      @close="close"
      @open="openDialog"
      top="80px"
      width="800px"
      append-to-body
    >
      <!-- S 完善属性 -->
      <el-form
        ref="formRef"
        :model="currentFile"
        :rules="rules"
        label-width="120px"
        class="demo-file"
      >
        <el-form-item label="申请时间" prop="applicationDatetime">
          <el-date-picker
            :disabled="true"
            v-model="currentFile.applicationDatetime"
            type="datetime"
            format="YYYY-MM-DD"
            placeholder="请选择时间"
            :shortcuts="shortcuts"
          />
        </el-form-item>
        <el-form-item label="申请人" class="code">
          <el-input disabled v-model="applicationUserId" maxlength="128" />
        </el-form-item>
        <el-form-item label="申请文档">
          <el-input :disabled="true" v-model="currentFile.fileName" />
        </el-form-item>
        <el-form-item label="申请查看周期" prop="timeCycle">
          <el-date-picker
            v-model="currentFile.timeCycle"
            type="daterange"
            range-separator="至"
            format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="申请原因" prop="applicationReason">
          <el-input
            v-model="currentFile.applicationReason"
            maxlength="512"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <!-- E 完善属性 -->
      <div class="dialog-footer">
        <el-button type="primary" size="small" @click="submit">
          提交
        </el-button>
        <el-button size="small" @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="approvalDialog">
import { formatDate } from '@/utils'
import { submitForm } from '../index.js'
import { judgeTime } from '@/utils'
const store = useStore()
const { proxy } = getCurrentInstance()
const applicationUserId = ref(store.state.user.userInfo.user.name)
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  currentFile: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
const emits = defineEmits(['getList', 'close'])
const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
const formRef = ref()
const rules = reactive({
  applicationDatetime: [
    {
      required: true,
      message: '请选择申请时间',
      trigger: 'change',
    },
  ],
  timeCycle: [
    {
      required: true,
      message: '请选择查看周期',
      trigger: 'change',
    },
  ],
  applicationReason: [
    { required: true, message: '请输入申请原因', trigger: 'blur' },
    { min: 0, max: 20, message: '长度不能超过20个字符', trigger: 'blur' },
  ],
})
const showDialog = computed({
  get() {
    return props.open
  },
  set(val) {
    emits('update:open', val)
  },
})

function openDialog() {
  props.currentFile['applicationDatetime'] = ref(getCurrentDay())
  props.currentFile['timeCycle'] = ref(getThreeDay())
  getCurrentDay()
}
function close() {
  proxy.$refs.formRef.resetFields()
  emits('close')
}
function submit() {
  submitForm(proxy).then((res) => {
    if (res) {
      const times = props.currentFile.timeCycle
      if (times && times.length > 0) {
        const lessThanYear = judgeTime(times[0], times[1], 31536000000)
        if (!lessThanYear) {
          proxy.$message.warning('申请时间过长，请重新选择查看周期')
          return
        }
      }

      const formatTime = 'yyyy-MM-dd'
      const parmas = {
        applicationDatetime: formatDate(
          props.currentFile.applicationDatetime,
          formatTime
        ),
        applicationUserId: store.state.user.userInfo.user.id,
        fileName: props.currentFile.fileName,
        startViewDate: formatDate(times[0], formatTime),
        endViewDate: formatDate(times[1], formatTime),
        applicationReason: props.currentFile.applicationReason,
      }
      emits('submit', parmas)
    }
  })
}

function getCurrentDay() {
  let currentYear = new Date().getFullYear()
  let currentMonth = new Date().getMonth()
  let currentDay = new Date().getDate()
  return new Date(currentYear, currentMonth, currentDay)
}

// 获取当月当天到后三天
function getThreeDay() {
  let currentYear = new Date().getFullYear()
  let currentMonth = new Date().getMonth()
  let currentDay = new Date().getDate()
  const endDay = getDay(2)
  return [
    new Date(currentYear, currentMonth, currentDay),
    new Date(
      new Date(endDay).getFullYear(),
      new Date(endDay).getMonth(),
      new Date(endDay).getDate()
    ),
  ]
}

function getDay(day) {
  let today = new Date()
  let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
  today.setTime(targetday_milliseconds) //注意，这行是关键代码
  let tYear = today.getFullYear()
  let tMonth = today.getMonth()
  let tDate = today.getDate()
  tMonth = doHandleMonth(tMonth + 1)
  tDate = doHandleMonth(tDate)
  return tYear + '-' + tMonth + '-' + tDate
}

function doHandleMonth(month) {
  let m = month
  if (month.toString().length == 1) {
    m = '0' + month
  }
  return m
}
</script>
<style lang="scss"></style>
<style scoped lang="scss">
.demo-file {
  width: 90%;
  :deep(.el-input),
  :deep(.el-input__inner) {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .code {
    .code-head {
      flex: 1;
      width: 100%;
      margin-right: 6px;
      white-space: nowrap;
    }
    :deep(.el-form-item__content) {
      display: flex !important;
    }
  }
}
.visible {
  display: none;
}
.upload-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin: 45px 0 0 0;
}
</style>
